import React, {Component} from "react";
import {View, TouchableOpacity, Alert, TextInput, StyleSheet, Dimensions, Modal, Text, Image} from "react-native";
import ClosableModal from "rn-closable-modal";
import {ImageButton} from "../CustomButton";
import {isMobile, isPhoneDigit, isSms, isSmsDigit} from "../CommonUtils";
import {fetchPostRequest} from "../../api/NetworkTool";
import Tips from "react-native-root-tips";
import api from "../../api/api";
import method from "../../api/method";
import TimerButton from "../login/TimerButton";

const {width, height} = Dimensions.get('window');

type Props = {
    callBackPhone:Function,
}

export default class MineEditNextPhoneDialog extends Component<Props> {

    constructor(props) {
        super(props);
        this.state = {
            isVisible: this.props.show,
            phone: '',
            send_sms: false,
            sms: '',
            // avatarSource:this.props.avatar,
        };
    }

    componentWillReceiveProps(nextProps) {
        this.setState({isVisible: nextProps.show});
    }

    closeModal = () => {
        this.setState({
            isVisible: false
        });
        this.props.closeModal(false);
        // this.props.callbackAvatar(this.state.avatarSource)
    }

    nextModal() {

        if (!isMobile(this.state.phone)) {
            Tips.showWarn('请输入正确的手机号码', {mask: true, position: -1})
            return
        }
        if (!isSms(this.state.sms)) {
            Tips.showWarn('请输入正确的验证码', {mask: true, position: -1})
            return
        }
        let params = {
            mobile: this.state.phone,
            captcha: this.state.sms,
        }
        fetchPostRequest(api.newMobile, method.post, params)
            .then(res => {
                Tips.showSuccess('修改成功', {mask: true, position: -1})
                this.setState({
                    isVisible: false
                });
                this.props.closeModal(false);
                this.props.callBackPhone(this.state.phone);
            })
            .catch(err => {
                Tips.showFail(err, {mask: true, position: -1})
            })

    }

    _phone_onChangeText(e) {

        if (!isPhoneDigit(e)) {
            Tips.showWarn('请输入有效的手机号码', {mask: true, position: -1})
            return
        }
        this.setState({phone: e})
        if (isMobile(e)) {
            this.setState({send_sms: true})
        } else {
            this.setState({send_sms: false})
        }

    }

    _sms_onChangeText(e) {

        if (!isSmsDigit(e)) {
            Tips.showWarn('请输入正确的验证码', {mask: true, position: -1})
            return
        }
        this.setState({sms: e})

    }

    send_sms() {

        let params = {
            mobile: this.state.phone,
            for: 'replace',
        }
        fetchPostRequest(api.smscode, method.post, params)
            .then(res => {

            }).catch(err => {
        })
    }

    render() {

        return (
            <View style={{flex: 1}}>
                <ClosableModal
                    animationType='fade'
                    show={this.state.isVisible}
                    onClose={this.closeModal}
                    transparent={true}
                >
                    <View style={styles.white_background}>
                        <ImageButton onPress={()=>{this.closeModal()}} style={{marginLeft:15,marginTop:15}}
                                     source={require('../../../res/img/dialog/icon_cancel.png')}/>
                        <View style={{justifyContent:'center',alignItems:'center'}}>
                            <Text style={{fontSize:14,fontWeight:'bold',color:'black',marginTop:12}}>修改联系电话</Text>
                            <View style={[styles.text_input_view,{flexDirection:'row'}]}>
                                <TextInput keyboardType='numeric' ref={(e)=>{this._phoneTF = e;}}
                                           onChangeText={(e)=>{this._phone_onChangeText(e)}} maxLength={11}
                                           style={{padding:0,width:140,color:'rgba(0,0,0,0.3)'}} placeholder='请输入新的手机号'
                                           placeholderTextColor='rgba(0,0,0,0.3)' underlineColorAndroid='transparent'/>
                            </View>
                            <View style={[styles.text_input_view1,{flexDirection:'row'}]}>
                                <TextInput keyboardType='numeric' maxLength={6}
                                           onChangeText={(e)=>{this._sms_onChangeText(e)}} ref={(e)=>{this._smsTF = e;}}
                                           style={{padding:0,width:140,color:'rgba(0,0,0,0.8)'}}
                                           placeholder='请输入您的验证码' placeholderTextColor='rgba(0,0,0,0.3)'
                                           underlineColorAndroid='transparent'/>
                                <View style={{flex:1}}/>
                                <TimerButton enable={this.state.send_sms}
                                             style={{backgroundColor:'#DB3843',
                                         marginRight:2,width:71,height:20,borderRadius:10,justifyContent:'center',alignItems:'center'}}
                                             textStyle={{color:'white',fontWeight:'200',fontSize:11}}
                                             disableColor='#333333'
                                             onClick={(shouldStartCountting)=>{
                                         this.send_sms();
                                     }}
                                />
                            </View>
                            <TouchableOpacity onPress={()=>{this.nextModal()}}
                                              style={{justifyContent:'center',alignItems:'center',backgroundColor:'#DB3843',height:30,width:291,marginTop:15,borderRadius:15,}}>
                                <Text style={{color:'white',fontSize:13}}>完成</Text>
                            </TouchableOpacity>
                        </View>
                    </View>
                </ClosableModal>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: 'rgba(0, 0, 0, 0.5)',
        justifyContent: 'center',
        alignItems: 'center',
    },

    white_background: {
        width: 331,
        height: 207,
        backgroundColor: 'white',
        borderRadius: 4,
    },
    text_input_view: {
        width: 291,
        height: 30,
        borderRadius: 15,
        borderWidth: 1,
        borderColor: '#DEDEDE',
        backgroundColor: 'white',
        paddingLeft: 20,
        paddingRight: 20,
        marginTop: 15,
        // justifyContent:'center',
    },
    text_input_view1: {
        width: 291,
        height: 30,
        borderRadius: 15,
        borderWidth: 1,
        borderColor: '#DEDEDE',
        backgroundColor: 'white',
        paddingLeft: 20,
        marginTop: 15,
        paddingTop: 2,
        // justifyContent:'center',
    },
});
const photoOptions = {
    title: '请选择',
    quality: 0.8,
    cancelButtonTitle: '取消',
    takePhotoButtonTitle: '拍照',
    chooseFromLibraryButtonTitle: '选择相册',
    allowsEditing: true,
    noData: false,
    storageOptions: {
        skipBackup: true,
        path: 'images'
    }
};